<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>drag</title>
	<meta name="author" content="Administrator" />
	
	<!-- Date: 2012-08-14 -->
	
	<style type="text/css">
		
		div{
			position: absolute;
			background-color: red;
		
			width: 200px;
			height: 200px;
			
			
			
			
		}
		
		
		
	</style>
	
	
</head>
<body>




<div style="left: 0px;top: 0px;" onmousedown="down(event,this)" onmouseup='up()'>sdf</div>
<div style="left: 400px;top: 0px;" onmousedown="down(event,this)" onmouseup='up()'>sdf</div>

<div style="left: 900px;top: 0px;" onmousedown="down(event,this)" onmouseup='up()'>sdf</div>





</body>
</html>
<script type="text/javascript">
	
	var posX;   
	var posY;   
	var popDiv;   
	var dragable;   

	
	function down(e,obj)
	{
		popDiv=obj;
	e = e || window.event; //如果是IE    

	posX = e.clientX - parseInt(popDiv.style.left);   
	   	
    posY = e.clientY - parseInt(popDiv.style.top);   
    dragable = true;   
    document.onmousemove = move;   


		
		
	}
	
	function move(ev){   
    if(dragable == true){   
        ev = ev || window.event;//如果是IE   
        popDiv.style.left = (ev.clientX - posX) + "px";      
        popDiv.style.top = (ev.clientY - posY) + "px";      
    }   
}   
  
function up(){   
    dragable = false;   
}  

	
	
</script>
